<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width"/>
  <title>Title</title>
  <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
  <link href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css" rel="stylesheet">
  <style>
    .tip {
      width: 10px;
      height: 25px;
      border-radius: 5px;
      background-color: #2DB7A0;
      display: inline-block;
      vertical-align: text-bottom;
    }

    .label {
      margin: 10px;
      font-size: large;
      font-weight: bold;
    }
  </style>
</head>
<body>
<script>
</script>
<script>
  data.resultFontColor = ''
  data.calculateResult = ''
  data.resultExplanation = ''
  data.selectedFormulaExpressionIdx = 0
  if(!data.describeContent){
    data.describeContent = '无'
  }
  if(!data.resultDescription){
    data.resultDescription = '无'
  }
</script>

<div id="app">
  <el-row style="border-bottom: 2px solid rgb(201, 201, 201);">
    <div class="label">{{ formulaName }}</div>
    <div style="margin: 10px; font-size: 12px; color: red">*所有计算结果必须重新核对，且不能作为临床决策的唯一依据</div>
  </el-row>
  <el-row style="margin: 10px">
    <div>
      <div class="tip"></div>
      <div style="display: inline-block; font-size: large">描述</div>
    </div>
    <div style="margin: 15px">{{ describeContent }}</div>
  </el-row>

  <el-row v-if="calculateType == 1" style="margin: 10px">
    <div>
      <div class="tip"></div>
      <div style="display: inline-block; font-size: large">公式计算</div>
    </div>
    <div style="margin: 15px" v-if="formulaExpressionItems.length > 1">
      <div>请选择:</div>
      <el-radio style="margin: 10px; "
        v-for="(item, idx) in formulaExpressionItems"
        :key="idx"
        v-model="selectedFormulaExpressionIdx"
        :label="idx">
        {{ item.item_type }}
      </el-radio>
    </div>
    <div style="margin: 15px" v-for="(item, idx) in formulaItems" :key="item.item_id">
      <div>{{ idx + 1 }} {{ item.item_name }} ({{item.item_unit}})</div>
      <el-input-number style="margin: 10px;" :controls="false" v-model="item.item_value"></el-input-number>
    </div>
  </el-row>

  <el-row v-else-if="calculateType == 2" style="margin: 10px">
    <div>
      <div class="tip"></div>
      <div style="display: inline-block; font-size: large">评分计算</div>
    </div>
    <div style="margin: 15px" v-for="(questionItem, idx) in scoreData" :key="questionItem.id">
      <div>{{ idx + 1 }} {{ questionItem.name }} ({{questionItem.multiple ? '多选' : '单选'}})</div>
      <div v-if="!questionItem.multiple">
        <el-radio style="display: block; margin: 10px;"
                  v-for="optionItem in questionItem.items"
                  :key="optionItem.id"
                  v-model="questionItem.score"
                  :label="optionItem.score">
          {{ optionItem.describe }}
        </el-radio>
      </div>
      <div v-else>
        <el-checkbox-group v-model="questionItem.checkList">
          <el-checkbox style="display: block; margin: 10px;"
                       v-for="optionItem in questionItem.items"
                       :key="optionItem.id"
                       :label="optionItem.score">
            {{ optionItem.describe }}
          </el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
  </el-row>

  <el-row v-if="calculateType != 3" style="margin: 10px">
    <div>
      <div class="tip"></div>
      <div style="display: inline-block; font-size: large">计算结果</div>
    </div>
    <div style="margin: 15px">
      <span v-if="calculateResult">{{ calculateResult }}</span>
      <span v-if="resultFontColor" :style="{'color': resultFontColor}">({{ resultExplanation }})</span>
      <div>
        <el-button type="primary" @click="calculate">{{ calculateResult ? '重新计算' : '点击计算' }}</el-button>
      </div>
    </div>
  </el-row>
  <el-row style="margin: 10px">
    <div>
      <div class="tip"></div>
      <div style="display: inline-block; font-size: large">结果说明</div>
    </div>
    <div style="margin: 15px" v-html="resultDescription">
    </div>
  </el-row>
  <el-row style="margin: 10px">
    <div>
      <div class="tip"></div>
      <div style="display: inline-block; font-size: large">参考文献</div>
    </div>
    <div style="margin: 15px"> {{ reference }}
    </div>
  </el-row>
</div>

<script>
  let resultColorMap = {
    default: 'gray',
    normal: 'green',
    excess: 'orange',
    serious: 'red'
  }
  let app = new Vue({
    el: '#app',
    methods: {
      calculate() {
        this.resultFontColor = ''
        this.calculateResult = ''
        this.resultFontColor = ''
        try {
          // 公式类型计算得分;
          if (this.calculateType == 1) {
            let cntExpression = ' ' + this.formulaExpressionItems[this.selectedFormulaExpressionIdx].item_expression + ' '
            for (let cntItem of this.formulaItems) {
              let reg = new RegExp(`[^a-zA-Z]${cntItem.item_id}[^a-zA-Z]`)
              while (reg.test(cntExpression)) {
                let strOri = cntExpression.match(reg)[0]
                // 把所有字符都默认为1, eval计算 (1/0)结果为Infinity, 不会抛异常;
                let strNew = strOri.replace(cntItem.item_id, `(${cntItem.item_value})`)
                cntExpression = cntExpression.replace(strOri, strNew)
              }
            }
            // eval 计算, 如果表达式有误, 则抛异常
            this.calculateResult = eval(cntExpression)
          }
          // 评分类型计算得分;
          else if (this.calculateType == 2) {
            for (let question of this.scoreData) {
              if (question.score) {
                this.calculateResult += question.score;
              }
            }
          }
          // 结果与结果集比较
          let relationArray = ['&&', '||']
          let conditionArray = ['>', '>=', '<', '<=', '==', '!=']
          for (let resultItem of this.resultItems) {
            let resultExpression = 'true'
            for (let condition of resultItem.sections) {
              resultExpression += relationArray[condition.relation] + '(' + this.calculateResult + ')' + conditionArray[condition.condition] + '(' + condition.value + ')'
            }
            let cntResultFlag = eval(resultExpression)
            if (cntResultFlag) {
              this.resultFontColor = resultColorMap[resultItem.result]
              this.resultExplanation = resultItem.explanation
              return
            }
          }
        } catch (e) {
          alert('计算失败')
        }
      }
    },
    watch: {
      scoreData: {
        handler(nv) {
          for (let question of nv) {
            if (question.multiple) {
              question.score = eval(question.checkList.join("+"))
            }
          }
        },
        deep: true
      },
    },
    data
  })
</script>
</body>
</html>
